<template>
	<!-- 招聘者 首页 -->
	<view>
		<view class="v-index">
			<my-head ref="myHead" :bg="headBg" :region="region" :color="fontColor" v-on:updatePattern="updatePattern"
				@selCity="selCity" @locationFilter="locationFilter"></my-head>
			<view :style="{ background: headBg }">
				<view class="icon-screen fl-t" :class="{ 'tab-color1': activation && pattern }">
					<view class="Sliding-box fl-t">
						<view class="add_name" v-for="(item, index) in posData"
							:class="posIndex == item.Id ? 'active' : ''" @click="swiClick(item, index)">
							{{ item.JobName }}
						</view>
					</view>
					<view class="icon-box fl-lr-c" style="padding: 0 16rpx;margin:0 16rpx">
						<!-- <image src="/static/static/images/conversation-profile.png" mode="" @click="expansionClick">
						</image> -->
						<u-icon name="arrow-down" color="#262626" size="20" style="margin-right:20rpx"
							@click="expansionClick"></u-icon>
						<image v-show="activation" src="/static/recruit/index/sx.png" mode="" @click="fnScreen()">
						</image>
						<image v-show="!activation" src="/static/recruit/index/saixuan.png" mode="" @click="fnScreen()">
						</image>
					</view>
					<u-popup :show="expansion" @close="expansion = false" mode="top" :round="10" @open="open"
						:safeAreaInsetTop="true">
						<view class="expansionClass">
							<view class="expansionClass-li" v-for="(item, index) in posData"
								:class="posIndex == item.Id ? 'actives' : ''" @click="swiClick(item, index)">
								{{ item.JobName }}
							</view>
						</view>
					</u-popup>
				</view>
				<view style="width: 100%; height: 86rpx"></view>
			</view>

			<!--切换-->
			<view v-if="!pattern">
				<view class="content3" v-if="listData.length > 0">
					<view class="content3-li" v-for="(item, index) in listData" @click="JobDetails(item)">
						<view class="li-left">
							<view class="top-img">
								<image v-if="item.Avatar" class="imgCla" :src="URL+item.Avatar" shape="square"></image>
								<image v-else-if="item.Sex == 1" class="imgCla" :src="man1"></image>
								<image v-else class="imgCla" :src="woman1 "></image>
								<!-- <u-avatar class="imgCla" :src="URL + item.Avatar" :default-url="src" shape="square">
								</u-avatar> -->
								<image class="imgs" :src="item.Sex == 1 ? man : woman" shape="square"></image>
							</view>
							<view class="bottom-text">{{ item.CurrentRole == 0 ? "职场人" : "学生"  }}</view>
						</view>
						<view class="li-right">
							<view class="position">
								<view class="position-left">
									{{ item.JobExpect.PositionName }}
								</view>
								<view class="position-right">
									{{item.JobExpect.Negotiable? "面议": formatNumber(item.JobExpect.MinWage) + "-"+formatNumber(item.JobExpect.MaxWage)}}
								</view>
							</view>
							<view class="information">
								<!-- 张三丨24 | 本科 | 3年经验 | 全职 | 离职-随时到岗 -->
								<span>{{ item.Name }}</span><span>丨</span>
								<span>{{ item.Age + "岁" }}</span><span>丨</span>
								<span>{{ item.EducationLevelStr }}</span><span>丨</span>
								<span>{{ item.WorkYear + "年经验" }}</span><span>丨</span>
								<!-- <span>{{ item.CurrentRole == 0 ? "职场人" : "学生" }}</span><span>丨</span> -->
								<span>{{ item.CurrentStatusStr }}</span>
							</view>
							<view class="text" v-if="item.GoodAt">
								{{ item.GoodAt }}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" v-if="!listData.length==0" style="margin-top: 0;" />

				<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="150">
				</u-empty>

				<!-- <u-loadmore style="margin-top: 0;" :status="status" /> -->
			</view>
			<view v-if="pattern">
				<!--卡片 -->
				<view class="content2">
					<!-- 暂无筛选数据 -->
					<view v-if="listData.length > 0">
						<swiper class="banner" @change="swiperItem">
							<swiper-item class="swiper-banner_item" v-for="(item, index) in listData">
								<view class="banner_item">
									<view class="position_item">
										<view class="position_name">
											{{ item.JobExpect.PositionName }}
										</view>
										<view class="wages">
											{{ item.JobExpect.Negotiable  ? "面议"   : formatNumber(item.JobExpect.MinWage) +   "-" +     formatNumber(item.JobExpect.MaxWage)   }}
										</view>
									</view>
									<view style="overflow: auto;" class="bottom-item">
										<view class="company-box fl-t" @click="JobDetails(item)">
											<view class="headPictureCla">
												<view class="stateCla">
													<view class="onlineStateCla"
														v-if="item.UserOnlineInfo !== null && item.UserOnlineInfo.State == true">
													</view>
													<view class="noOnlineStateCla" v-else></view>
												</view>
												<image v-if="item.Avatar" class="logo"
													:src="item.Avatar ? URL + item.Avatar : src" mode="aspectFill">
												</image>
												<image v-else-if="item.Sex == 1" class="logo" :src="man1"
													mode="aspectFill"></image>
												<image v-else :src="woman1" class="logo" mode="aspectFill"></image>
											</view>
											<!-- <u-avatar class="logo" :src="URL+item.Avatar"
												shape="square" :default-url="src"></u-avatar> -->
											<view class="company-box-right">
												<view class="state"> </view>
												<view class="company_name">
													{{ item.Name }}
													<image class="imgs" :src="item.Sex == 1 ? man : woman"
														shape="square"></image>
												</view>
												<view class="fl-t" style="flex-wrap: wrap">
													<view class="release_time">{{item.Age + "岁"}}</view>
													<view class="release_time">丨</view>
													<view class="release_time">
														{{ item.EducationLevelStr ? item.EducationLevelStr : "无"   }}
													</view>
													<view class="release_time">丨</view>
													<view class="release_time">{{ item.WorkYear + "年经验"   }}</view>
													<view class="release_time">丨</view>
													<view class="release_time">
														{{ item.CurrentRole == 0 ? "职场人" : "学生" }}
													</view>
													<view class="release_time">丨</view>
													<view class="release_time">{{ item.CurrentStatusStr}}</view>
												</view>
											</view>
										</view>
										<view class="JobDescription" v-if="item.WorkExps.length > 0"> 工作经历 </view>
										<view class="content_undergo" v-if="item.WorkExps.length > 0">
											<view class="undergo-left">
												<image class="logo1" src="/static/static/images/gz.png"
													mode="aspectFit"></image>
												<view class="line"> </view>
												<image class="logo1" src="/static/static/images/xl.png" mode=""
													style="margin-bottom: 10rpx"></image>
											</view>
											<view class="undergo-right">
												<!-- 工作 -->
												<view class="educatio-ul"
													v-for="(ite, index) in gzScreening(item.WorkExps)">
													<view class="educatio-li">
														{{ dateFormat(ite.StartDate) + "-" +  dateFormat(ite.EndDate) }}
													</view>
													<view class="educatio-bottom">
														<view class="educatio-lis xianz">
															{{ ite.CompanyName }}
														</view>
														<view class="educatio-lis xianz">
															{{ ite.CategoryStr }}
														</view>
														<view class="educatio-lis xianz">
															{{ formatNumber(ite.Wage) }}
														</view>
													</view>
												</view>
												<!-- 学历 -->
												<view class="educatio-ul" style="margin-top: 30rpx"
													v-for="(ite, index) in xlScreening(item.EducationExps)">
													<view class="educatio-li">
														{{ dateFormat(ite.StartDate) +"-"+dateFormat(ite.EndDate) }}
													</view>
													<view class="educatio-bottom">
														<view class="educatio-lis xianz">
															{{ ite.SchoolName }}
														</view>
														<view class="educatio-lis xianz">
															{{ ite.Major }}
														</view>
														<view class="educatio-lis xianz">
															{{ ite.EduDegreeStr }}
														</view>
													</view>
												</view>
											</view>
										</view>
										<!-- 	<u-empty v-if="!item.WorkExps.length > 0" mode="list" text="内容为空"
											icon="http://cdn.uviewui.com/uview/empty/list.png" width="80" height="60">
										</u-empty> -->
										<view class="JobDescription" v-if="item.GoodAt"> 自我介绍 </view>
										<view class="content_d" v-if="item.GoodAt">
											<text class="li">
												{{ item.GoodAt }}
											</text>
										</view>
										<u-empty v-if="!item.GoodAt &&  !item.WorkExps.length > 0" mode="list"
											text="内容为空" icon="http://cdn.uviewui.com/uview/empty/list.png" width="80"
											height="60">
										</u-empty>
										<!-- v-for="(ite, ind) in item.GoodAtImages.split(',')" -->
										<view class="left-company" v-if="item.GoodAtImages">
											<image v-for="(ite, ind) in imgList(item.GoodAtImages.split(',')  )"
												class="logo" :src="ite" mode="aspectFill"
												@click="previewImage(ind, imgList(item.GoodAtImages.split(',')))">
											</image>

											<view class="videoClass" v-if="item.GoodAtVideo" @click="gotoVideo(item)">
												<image class="imageClass"
													src="https://cdn.uviewui.com/uview/album/1.jpg">
												</image>
												<image class="top-img" src="/static/static/images/video-file.png">
												</image>
											</view>
										</view>
										<!-- <view class="videoClass" v-if="item.GoodAtVideo">
											<video width="1" objectFit="cover" height="1" controls loop="loop" id="myVideo"
												:src="URL+item.GoodAtVideo"></video>
										</view> -->
										<!-- <u-popup :show="show" mode="center" @close="show = false" @open="open" v-if="item.GoodAtVideo">
											<view class="videosClass">
												<video width="1" objectFit="cover" height="1" controls loop="loop"
													id="myVideo" :src="URL+item.video[0].VideoPath" @click="gotoVideo"></video>
											</view>
										</u-popup> -->

									</view>
								</view>
								<view class="bottom_bar fl-t">
									<view class="fl-c-c" @click="Interested(item)">
										<image v-if="item.IsCollect" src="/static/recruit/index/gxq1.png" mode="">
										</image>
										<image v-else src="/static/recruit/index/gxq.png" mode=""></image>
										<view class="but-text">感兴趣</view>
									</view>
									<view class="fl-c-c" @click="clickinterted(item)">
										<image src="/static/recruit/index/dzh1.png" mode=""></image>
										<view class="but-text">打招呼</view>
									</view>
								</view>

							</swiper-item>
						</swiper>
					</view>



					<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="150">
					</u-empty>
				</view>
			</view>
		</view>

		<!-- <u-popup :show="chooseShow" @close="chooseClose" @open="chooseOpen" mode="bottom" :round="10">
			<view class="choose-title">选择职位</view>
			<view class="choose-content">
				<view class="choose-ul" v-if="this.posData.length > 0">
					<view class="choose-li" v-for="(item, index) in posData" :key="index"
						 @click="chooseClick(item, index)">
						<view class="li-top">
							<view class="li-name" :class="chooseIndex == index ? 'active' : ''">
								{{item.JobName}}
							</view>
							<view class="li-mayo">
								{{formatNumber(item.MinWage) + '-' + formatNumber(item.MaxWage)}}
							</view>
						</view>
						<view class="li-center">
							<view>{{item.ProvinceCodename}}</view>
							<view>{{item.EducationCn}}</view>
							<view>{{item.Experience + '经验'}}</view>
						</view>
					</view>
					
				</view>
				<view class="choose-text" v-else>
					<span>您当前还没有发布职位，请先发布职位！</span>
				</view>
			</view>
			<view class="bottom-right">
				<u-button type="primary" text="取消" @click="chooseShow = false, chooseId = null" plain></u-button>
				<u-button type="primary" :disabled="chooseId == null && this.posData.length > 0" :text="this.posData.length > 0?'确定':'去发布'" @click="determine">
				</u-button>
			</view>
		</u-popup> -->

	</view>
</template>

<script>
	// import config from "@/common/api/config.js";
	import myHead from "@/pages/component/head-recruit.vue";
	import area from "@/pages/component/area.js";

	const app = getApp();

	export default {
		data() {
			return {
				areaOptions: area, // 地址
				URL: this.$config.domain.staticUrl,
				// URL: config.domain.staticUrl,
				video: null,
				activation: false, // 视频 推荐
				fontColor: "#fff",
				headBg: "#1684FC",
				region: [],
				pattern: true, // 模式
				showPicker: false,
				more: true,

				city: -1, //城市  未加载完成

				src: "/static/static/images/avatar1_100.png",
				man: "/static/image/my/man.png",
				woman: "/static/image/my/woman.png",
				man1: "/static/recruit/index/nan.png",
				woman1: "/static/recruit/index/nv.png",
				status: "loadmore",
				mores: true,

				postId: "",
				objPara: {
					PageSize: 10, // 每页大小
					PageIndex: 1, // 页码
					PositionList: null, // 职位ID
					Age: "", // 年龄
					EducationLevel: [], // 教育程度
					Marriage: null, // 婚姻状况 0未婚 1已婚
					Industry: null, // 公司行业
					ProvinceCode: "", // 工作地点 省
					KeyWord: null, // 关键字搜索
					Sex: null, // 性别 1男 2女
					Category1: null, // 职位分类1 职位父级分类
					CityCode: "", // 工作地点 市
					WorkType: null, // 职位性质 0全职 1兼职 2实习
					WorkYear: null, // 工作年限 0应届生 1在校生； 1年以内 0-1，十年以上 10-100
					Wage: null, // 薪资待遇
					CurrentStatus: null, // 目前状态
				},
				listData: [],
				posData: [],
				posFirst: null,
				posIndex: 0,

				salary: null, //薪资待遇 字典

				show: false,
				expansion: false,

				// chooseShow: false,
				// chooseIndex: null,
				// chooseId: null,
				// UserId: null,
				// PositionId:null,
			};
		},
		created() {
			this.getPosData();
		},

		computed: {},
		components: {
			myHead,
		},
		watch: {
			city: {
				handler(city, oldCity) {
					this.empty();
					// this.getJobWanted()
				},
				immediate: false,
			},
			"$store.state.add": {
				handler(val) {
					console.log(val);
					this.objPara.Wage = val[1].id;
					this.objPara.WorkYear = val[2].id;
					if (val[0]) {
						if (val[0].activation[0] === 0 || val[0].activation === 0) {
							this.objPara.EducationLevel = null
						} else {
							this.objPara.EducationLevel = val[0].activation;
						}

					} else {
						this.objPara.EducationLevel = null;
					}
					if (val[3].id) {
						this.objPara.Sex = Number(val[3].id);
					} else {
						this.objPara.Sex = null;
					}
					console.log(this.objPara);
					this.listData = [];
					this.objPara.PageIndex = 1;
					this.getJobIntention();
				},
				deep: true,
			},
		},
		methods: {
			//视频跳转
			gotoVideo(item) {
				let videoUrl = item.video[0].VideoPath
				uni.navigateTo({
					url: '/pages/views/packageA/type-recruit/video/index?item=' + JSON.stringify(videoUrl)
				})
			},

			upDatas() {
				this.$http.huirc.talentPoolPosition({
					AuditStatus: 1,
					Display: 0,
					PageIndex: 1,
					PageSize: 10000,
				}).then((res) => {
					if (res.Success && res.Result.Items.length !== 0) {
						
						this.posData = res.Result.Items;
						// if (this.posData.length > 0) {
						if (this.posData.findIndex(i => i.Id == this.posIndex) == -1) {
							
							this.posIndex = this.posData[0].Id;   
							this.postId = this.posData[0].Id;
							this.objPara.PositionList = [this.posData[0].PositionId];
							this.posFirst = this.posData[0];
							this.listData = [];
							this.objPara.PageIndex = 1;
							this.getJobIntention();
						} else {
							
							// this.getJobIntention();
						}
					} else {
						this.posIndex = 0;
						this.posData = [];
						this.listData = [];
					}
				});
			},
			// 职位列表
			getPosData() {
				this.$http.huirc.talentPoolPosition({
						AuditStatus: 1,
						Display: 0,
						PageIndex: 1,
						PageSize: 10000,
					})
					.then((res) => {
						if (res.Result && res.Result.Items.length > 0) {
							this.posData = res.Result.Items;
							this.postId = this.posData[0].Id;
							this.posIndex = this.posData[0].Id;
							this.objPara.PositionList = [this.posData[0].PositionId];
							this.posFirst = this.posData[0];

							this.listData = [];
							this.objPara.PageIndex = 1;
							this.posData.forEach((item, index) => {
								this.areaOptions.forEach((item2, index) => {
									item2.children.forEach((item3, index) => {
										// console.log('55555', item3);
										if (item.CityCode == item3.value) {
											if (item3.label == "市辖区") {
												item.ProvinceCodename = item2.label;
											} else {
												item.ProvinceCodename = item3.label;
											}
										}
									});
								});
							});

							this.getJobIntention();
						} else {
							this.getJobIntention();
						}
					});
			},
			// 切换职位
			swiClick(item, index) {
				this.expansion = false;
				this.postId = item.Id;
				this.objPara.PositionList = [item.PositionId];
				this.posIndex = item.Id;
				this.listData = [];
				this.objPara.PageIndex = 1;
				this.getJobIntention();
			},

			getJobIntention() {
				//推荐人才
				// this.objPara.
				this.$http.huirc.talentPoolSearch(this.objPara).then((res) => {
					if (res.Success) {
						if (res.Result.Items.length == 0) {
							// 没有数据----
							this.status = "nomore";
							this.mores = false;
							return;
						}
						this.listData = this.listData.concat(res.Result.Items);
						if (res.Result.Items.length >= this.objPara.PageSize) {
							this.mores = true;
							this.objPara.PageIndex++;
							this.status = "loadmore";
							// 表示还有数据
						} else {
							//没有更多数据了
							this.status = "nomore";
							this.mores = false;
						}
						this.conversion()
					} else {
						// console.log(res);
					}
				});
			},
			//转换
			conversion() {
				this.listData.forEach((item, index) => {
					if (item.GoodAtVideo !== null && item.GoodAtVideo !== "") {
						let GoodAtVideo = JSON.parse(item.GoodAtVideo)
						item['video'] = GoodAtVideo
					}
				})
			},

			// 数字转K
			formatNumber(num) {
				// return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(0) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
				return num >= 1e3 ? (num / 1e3).toFixed(0) + "k" : num;
			},
			dateFormat(time) {
				// console.log(time)
				// let date = new Date(time);
				let year = time.split(" ")[0].split("-")[0];
				let month = time.split(" ")[0].split("-")[1];

				return year + "." + month;

			},
			imgList(val) {
				return val.map((res) => {
					return `${this.URL}${res}`;
				});
			},
			previewImage(index, item) {
				console.log(item);
				uni.previewImage({
					current: index,
					urls: item,
				});
			},
			open() {},
			//清空
			empty() {
				// if (!this.activation) { //推荐
				// 	this.page = 1
				// 	this.more = true;
				// 	// debugger
				// 	this.List = [];
				// } else { //视频
				// 	this.page1 = 1;
				// 	this.more1 = true;
				// 	this.videoList = [];
				// 	this.num = 0;
				// }
				console.log("清空");
			},
			// 卡片懒加载
			swiperItem(item) {
				if (this.listData.length - item.detail.current < 2) {
					//重新请求数据
					if (this.mores) {
						console.log(item.detail.current);
						this.getJobIntention();
					} else {
						this.$util.toast("没有更多数据了");
					}
				}
			},
			// 列表懒加载
			lazyLoading() {
				// console.log("列表懒加载");
				if (!this.pattern) {
					if (this.mores) {
						this.getJobIntention();
					}
				}
			},

			JobDetails(item) {
				// ?renid=${item.f_faburenid}&f_id=${item.f_id}
				console.log(item);
				let int = item.JobExpectId;
				uni.navigateTo({
					url: `/pages/views/packageA/type-recruit/search/JobDetails?key=${int}&id=${this.postId}`,
				});
			},

			expansionClick() {
				this.expansion = true;
				// debugger
				// let url = "./packageB/resume/edit/JobIntention";
				// uni.navigateTo({
				// 	url: `${url}?type=3`
				// })
			},
			fnScreen() {
				//将筛选数据传过去
				uni.navigateTo({
					url: "/pages/views/packageA/type-recruit/search/screen",
				});
			},
			locationFilter(data) {
				//选择城市
				this.empty();
				this.city = data;
			},
			// getLocation() {
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		geocode: true,
			// 		success: (res) => {
			// 			this.region = [];
			// 			this.region.push(res.address.province)
			// 			this.region.push(res.address.city)
			// 			this.region.push(res.address.district)
			// 		},
			// 		fail: (res) => {
			// 			console.log("获取失败")
			// 			this.getJobWanted();
			// 		}
			// 	})
			// },
			selCity() {
				this.showPicker = true;
			},
			updatePattern(bool) {
				//切换
				// console.log(this.more)
				this.pattern = bool;
				this.listData = [];
				this.objPara.PageIndex = 1;
				this.getJobIntention();
				// if (!bool) {
				// 	this.$refs.myHead.clickTab(false);
				// 	this.activation = false; //推荐
				// 	this.fontColor = "#fff";
				// 	this.headBg = "#1684FC";
				// } else {
				// 	if (this.activation) {
				// 		this.fontColor = "#fff";
				// 		this.headBg = "#151724";
				// 		if (this.more1) {
				// 			// this.getJobWanted();
				// 		}
				// 	} else {
				// 		this.fontColor = "#fff";
				// 		this.headBg = "#1684FC";
				// 		if (this.more) {
				// 			// this.getJobWanted();
				// 		}
				// 	}
				// }
			},

			Interested(item) {
				// console.log(item);
				// return
				if (item.IsCollect) {
					let obj = {
						JobExpectId: [item.JobExpectId],
					};
					this.$http.huirc.collectionDel(obj).then((res) => {
						if (res.Success) {
							// console.log(res.Result);
							this.$util.toast(res.Message);
							// this.getdata()
							item.IsCollect = false;
						} else {
							this.$util.toast("取消收藏失败");
							// console.log(res);
						}
					});
				} else {
					let obj = {
						JobExpectId: [item.JobExpectId],
					};
					this.$http.huirc.collectionAdd(obj).then((res) => {
						if (res.Success) {
							// console.log(res.Result);
							this.$util.toast(res.Message);
							// this.getdata()
							item.IsCollect = true;
						} else {
							this.$util.toast("收藏失败");
							console.log(res);
						}
					});
				}
			},
			gzScreening(val) {
				if (val.length > 3) {
					let arr = val.slice(0, 3);
					return arr;
				} else {
					return val;
				}
			},
			xlScreening(val) {
				let i = 0;
				let arr = [];
				val.forEach((item) => {
					if (item.EduDegree > i) {
						i = item.EduDegree;
						arr = [item];
					}
				});
				// console.log(arr);
				return arr;
			},
			//点击打招呼
			clickinterted(item) {
				// console.log(item);
				console.log(item, '55555555555555555555');
				// this.chooseShow = true;
				// this.UserId = item.UserId;
				let obj = {
					UserId: item.UserId,
					JobId: this.postId,
					HasChat: 1,
					ApplyWay: 2,
				};
				console.log(obj, '222444353535');
				// return
				this.$http.huirc.jobUserRecordup(obj).then((res) => {
					if (res.Success) {
						// 招聘者-求职 C2C{UserId}
						if (item.UserId) {
							let id = "C2C" + item.UserId;
							const url = `/pages/views/packageE/type-recruit/TUI-Chat/chat?conversationID=${id}`;

							uni.navigateTo({
								url: url,
							});
						}

					}
				});
			},

			// chooseClose(){
			// 	this.chooseShow = false
			// },

			// chooseOpen(){
			// 	// this.chooseShow = false
			// },
			// //选中的职位
			// chooseClick(item,index){
			// 	console.log(item,index)
			// 	this.chooseId = item.Id
			// 	this.chooseIndex = index
			// },
			// 打招呼确定
			// determine(){
			// 	this.chooseShow = false;
			// 	if(this.posData.length > 0){
			// 		let obj = {
			// 			UserId: this.UserId,
			// 			JobId: this.chooseId,
			// 			HasChat: 1,
			// 			Applyway: 2
			// 		}
			// 		// console.log(obj)
			// 		this.$http.huirc.jobUserRecordup(obj).then(res => {
			// 			if (res.Success) {
			// 				// 招聘者-求职 C2C{UserId}
			// 				let id = 'C2C' + this.UserId;
			// 				const url = `/pages/views/packageE/type-recruit/TUI-Chat/chat?conversationID=${id}`;
			// 				uni.navigateTo({
			// 					url: url
			// 				});
			// 			}
			// 		})
			// 	} else {
			// 		uni.navigateTo({
			// 			url:'/pages/views/packageC/type-recruit/zhiwei/addindex'
			// 		})
			// 	}
			// }

		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
	}

	/deep/.u-popup__content {
		padding: 20rpx;

		.choose-title {
			height: 40rpx;
			font-size: 38rpx;
			font-weight: bold;
			color: #000000;
			line-height: 40rpx;
			margin-top: 30rpx;
		}

		.choose-content {
			padding: 0 30rpx;
			margin: 30rpx 0;
			height: 500rpx;
			overflow-y: auto;

			.choose-ul {

				.choose-li {
					border-bottom: 1px solid #dee5ef;
					margin-top: 10rpx;

					.li-top {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						font-size: 32rpx;
						font-weight: bold;

						.li-name {
							color: #000000;
						}

						.active {
							color: #338FFF;
						}

						.li-mayo {
							color: #f35370;
						}
					}

					.li-center {
						display: flex;
						margin-top: 10rpx;

						view {
							padding: 14rpx 20rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #666666;
							background: #f7f7f7;
							border-radius: 4rpx;
							margin-right: 20rpx;
							width: auto;
							margin-bottom: 20rpx;
						}
					}
				}
			}

			.choose-text {
				width: 100%;
				display: flex;
				justify-content: center;
				height: 100%;
				align-items: center;
			}
		}

		.bottom-right {
			margin-bottom: 20rpx;
			display: flex;

			.u-button {
				width: 150rpx;
			}
		}
	}


	.content3 {
		width: 100%;
		height: initial;

		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
		overflow-y: auto;

		.content3-li {

			display: flex;
			justify-content: left;
			background-color: #fff;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;

			.li-left {
				display: flex;
				flex-direction: column;

				.top-img {
					position: relative;
					border-radius: 100px;

					/deep/.imgCla {
						width: 108rpx !important;
						height: 108rpx !important;
						border-radius: 200rpx !important;

						.u-avatar__image {
							width: 100% !important;
							height: 100% !important;
						}
					}

					.imgs {
						width: 29rpx;
						height: 29rpx;
						border-radius: 29rpx;
						position: absolute;
						right: -8rpx;
						bottom: -2rpx;
					}
				}

				.bottom-text {
					width: 108rpx;
					height: 42rpx;
					font-size: 24rpx;
					background: #ffffff;
					color: #666666;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					opacity: 1;
					border: 1rpx solid #e9e9e9;
					line-height: 42rpx;
					text-align: center;
					margin-top: 24rpx;
				}
			}

			.li-right {
				flex: 1;
				margin-left: 20rpx;

				.position {
					display: flex;
					justify-content: space-between;
					height: 45rpx;

					.position-left {
						font-size: 32rpx;
						font-weight: 400;
						color: #000000;
						line-height: 45rpx;
					}

					.position-right {
						font-size: 38rpx;
						font-weight: 400;
						color: #f35370;
						line-height: 45rpx;
					}
				}

				.information {
					min-height: 33rpx;
					margin: 20rpx 0 25rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #313131;
					line-height: 33rpx;
				}

				.text {
					height: 75rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}
		}
	}

	.icon-screen {
		width: 100%;
		height: 88rpx;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		background-color: #ffff;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 2;

		.Sliding-box {
			width: calc(100% - 100rpx);
			height: 100%;
			margin-right: 20rpx;
			white-space: nowrap;
			overflow-x: auto;
			position: relative;
			z-index: 10;

			.add_name {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				margin-right: 48rpx;
				display: inline-block;
			}

			.active {
				font-weight: bold !important;
				color: #1684fc;
			}
		}

		.icon-box {
			width: 90rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.expansionClass {

			margin-top: 100rpx;
			padding: 0 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: left;

			.expansionClass-li {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 30rpx;

				font-weight: 400;
				color: #333333;
				margin: 0 50rpx 20rpx 0;
			}

			.actives {
				font-weight: bold !important;
				color: #1684fc;
			}
		}
	}

	.tab-color1 {
		background-color: #151724;
	}

	.content2 {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		box-sizing: border-box;
		// min-height: calc(100vh - 278rpx - var(--status-bar-height));
		display: flex;
		flex-direction: column;

		.banner {
			margin-top: 20rpx;
			width: 100%;
			// height: calc(100vh - 310rpx - var(--status-bar-height));
			// height: calc(100vh - 290rpx - var(--status-bar-height));
			height: calc(100vh - 306rpx);

			.swiper-banner_item {
				flex: 1;
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;
				flex-direction: column;
				justify-content: space-between;
				align-content: space-between;

				.banner_item {
					height: calc(100vh - 414rpx);
					// height: 85%;
					width: calc(100% - 40rpx);
					margin: 0rpx 20rpx;
					background: #ffffff;
					box-shadow: 0px 3rpx 24rpx 0px rgba(106, 106, 106, 0.13);
					border-radius: 20rpx;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					padding-bottom: 40rpx;

					.position_item {
						width: 100%;
						//padding: 50rpx 30rpx;
						justify-content: space-between;
						display: flex;
						box-sizing: border-box;
						border-bottom: 1px solid #f5f5f5;

						.position_name {
							font-size: 46rpx;
							  
							font-weight: bold;
							color: #313131;
						}

						.wages {

							font-size: 32rpx;
							margin-top: 12rpx;
							//   
							font-weight: 600;
							color: #f35370;
						}
					}

					.bottom-item {
						overflow: hidden;
						// height: 500rpx;
						height: calc(100vh - 514rpx);

						.headPictureCla {
							position: relative;

							.stateCla {
								width: 104rpx;
								height: 104rpx;
								position: absolute;
								z-index: 99;
								margin-top: 84rpx;

								.onlineStateCla {
									width: 20rpx;
									height: 20rpx;
									background-color: #14C88B;
									border-radius: 100px;
									float: right;
								}

								.noOnlineStateCla {
									width: 20rpx;
									height: 20rpx;
									background-color: #b2b6bf;
									border-radius: 100px;
									float: right;
								}
							}
						}
					}

					.company-box {
						width: 100%;
						min-height: 80rpx;
						padding: 30rpx 0 0;
						// box-sizing: border-box;
						display: flex;
						justify-content: left;

						/deep/.logo {
							width: 100rpx !important;
							height: 100rpx !important;
							border-radius: 200rpx !important;
							// margin-right: 36rpx !important;
						}

						.company-box-right {
							margin-left: 20rpx;
							// position: relative;

							// .state {
							// 	width: 12rpx;
							// 	height: 12rpx;
							// 	background: #14C88B;
							// 	border-radius: 50%;
							// 	position: absolute;
							// 	left: -30rpx;
							// 	bottom: 0;
							// }

							.company_name {
								font-size: 32rpx;
								font-weight: bold;
								color: #313131;
								margin-bottom: 14rpx;
								display: flex;
								align-items: center;

								.imgs {
									width: 29rpx;
									height: 29rpx;
									border-radius: 29rpx;
									margin-left: 10rpx;
									// position: absolute;
									// right: -8rpx;
									// bottom: -2rpx;
								}
							}

							.release_time {
								font-size: 24rpx;
								font-weight: 500;
								color: #999999;
								// margin-right: 30rpx;
							}
						}
					}

					.JobDescription {
						width: 100%;
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #313131;
						padding: 20rpx 0;
						box-sizing: border-box;
					}

					.specific {
						font-weight: 500;
						color: #313131;
						font-size: 28rpx;
						padding: 26rpx 10rpx;
						box-sizing: border-box;
					}

					.content_undergo {
						width: 100%;
						padding: 0 10rpx;
						box-sizing: border-box;
						position: relative;
						// overflow-y: hidden;
						// flex: 1;
						// height: 0;
						display: flex;
						// flex-direction: column;
						justify-content: left;

						.undergo-left {
							display: flex;
							flex-direction: column;
							justify-content: left;

							.logo1 {
								width: 60rpx;
								height: 60rpx;
							}

							.line {
								flex: 1;
								position: relative;

								&::before {
									content: "";
									width: 1px;
									height: 100%;
									background: #ccc;
									position: absolute;
									top: 0;
									left: 50%;
								}
							}
						}

						.undergo-right {
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							justify-content: left;

							.educatio-ul {
								display: flex;
								flex-wrap: wrap;
								justify-content: left;
								margin-bottom: 20rpx;

								.educatio-li {
									height: 35rpx;
									line-height: 35rpx;
									margin-right: 68rpx;
									font-size: 26rpx;
									font-weight: 400;
									color: #999999;
								}

								.educatio-bottom {
									width: 100%;
									display: flex;
									// flex-wrap: wrap;
									justify-content: space-between;
									margin-top: 10rpx;

									.educatio-lis {
										height: 35rpx;
										line-height: 35rpx;
										margin-right: 0rpx;
										font-size: 28rpx;
										font-weight: 400;
										color: #000000;
									}

									.xianz {
										// max-width: 33%;
										width: 180rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
									}
								}
							}
						}
					}

					.content_d {
						width: 100%;
						padding: 0 10rpx;
						box-sizing: border-box;
						position: relative;
						// overflow-y: hidden;
						// flex: 1;
						// height: 0;
						display: flex;
						flex-direction: column;
						justify-content: left;
						text-align: justify;

						.li {
							font-size: 28rpx;
							font-weight: 400;
							color: #313131;
							line-height: 34rpx;
							padding-bottom: 28rpx;
						}
					}

					.left-company {
						// width: auto;
						// height: auto;
						display: flex;
						flex-wrap: wrap;
						justify-content: left;

						.logo {
							width: 24%;
							height: 150rpx;
							flex-shrink: 0;
							border-radius: 15rpx;
							margin-right: 1%;
						}

						.videoClass {
							width: 24%;
							height: 150rpx;
							flex-shrink: 0;
							position: relative;
							border-radius: 15rpx;

							.imageClass {
								width: 100%;
								height: 100%;

								border-radius: 15rpx;
							}

							.top-img {
								width: 60rpx;
								height: 60rpx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}

					.videosClass {
						display: flex;
						justify-content: center;
					}
				}

				.bottom_bar {
					// margin-bottom: 20rpx;
					height: 80rpx;
					width: 100%;
					display: flex;
					justify-content: space-around;

					.but-text {
						font-size: 24rpx;
						  
						font-weight: 400;
						color: #151724;
						// margin-top: 14rpx;
					}

					image {
						width: 42rpx;
						height: 42rpx;
					}
				}
			}
		}
	}

	.banner_item {
		height: 100%;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		// display: flex;
		flex-direction: column;
		position: relative;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		.position_item {
			width: 100%;
			padding: 20rpx 0 20rpx;
			justify-content: space-between;
			display: flex;
			box-sizing: border-box;

			.position_name {
				font-size: 54rpx;
				font-weight: bold;
				color: #313131;
			}

			.wages {
				font-size: 40rpx;
				font-weight: bold;
				color: #f35370;
			}
		}

		.company-box {
			// width: 100%;
			// padding: 30rpx 0 50rpx;
			// box-sizing: border-box;

			// .logo {
			// 	width: 74rpx;
			// 	height: 74rpx;
			// 	border-radius: 50%;
			// 	margin-right: 36rpx;
			// 	flex-shrink: 0;
			// }

			// .company-box-right {
			// 	position: relative;

			// 	.state {
			// 		width: 12rpx;
			// 		height: 12rpx;
			// 		background: #14C88B;
			// 		border-radius: 50%;
			// 		position: absolute;
			// 		left: -30rpx;
			// 		bottom: 0;
			// 	}

			// 	.company_name {
			// 		font-size: 28rpx;
			// 		font-weight: bold;
			// 		color: #313131;
			// 		margin-bottom: 14rpx;
			// 	}

			// 	.release_time {
			// 		font-size: 24rpx;
			// 		font-weight: 500;
			// 		color: #999999;
			// 		// margin-right: 30rpx;
			// 	}
			// }
		}

		// .JobDescription {
		// 	width: 100%;
		// 	font-weight: 500;
		// 	color: #313131;
		// 	font-size: 30rpx;
		// 	font-weight: 800;
		// 	padding-bottom: 20rpx;
		// 	box-sizing: border-box;
		// }
	}
</style>